/* components */
import {
  ConnectorSettingViewHeader,
  ConnectorSettingViewMain,
} from '@src/modules/connector/view/setting/components';
/* model */
import { ConnectorModuleComponentNameEnum } from '@src/modules/connector/model';
/* scss */
import '@src/modules/connector/view/list/index.scss';
/* vue */
import {
  ComponentInstance,
  // @ts-ignore
  ComponentRenderProxy,
  defineComponent,
  onMounted,
  ref,
  Ref,
} from 'vue';
import { CommonComponentInstance } from '@model/VC';
import { CreateElement } from 'vue';
/* utils */
import { message } from '@src/util/message';
import { t } from '@src/locales'
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum';

export type ConnectorSettingViewProps = {};

export interface ConnectorSettingViewSetupState {}

export enum ConnectorSettingViewEmitEventNameEnum {
  Input = 'input',
}

export type ConnectorSettingViewInstance = ComponentInstance &
  ConnectorSettingViewSetupState;
export type ConnectorSettingViewVM =
  ComponentRenderProxy<ConnectorSettingViewProps> &
    CommonComponentInstance &
    ConnectorSettingViewInstance;

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorSettingView,
  emits: [ConnectorSettingViewEmitEventNameEnum.Input],
  props: {},
  mounted() {
    this.name = this.getQueryString('name') || '';
    this.description = this.getQueryString('description') || '';
  },
  setup(props: ConnectorSettingViewProps, { emit }) {
    const name: Ref<string> = ref('');
    const description: Ref<string> = ref('');
    const main: Ref<any> = ref();
    const loading: Ref<boolean> = ref(false);
    /**
     * @description: 连接器名称
     * @return {*}
     */
    const onInputName = (val: string) => {
      name.value = val;
    };

    const updateInfo = (val:any) => {
      if(val.name) name.value = val.name;
      if(val.description) description.value = val.description;
    }
    /**
     * @description: 保存
     * @return {*}
     */
    const save = () => {
      if (!name.value) return message.error(t('common.connector.tips.tip2'));
      main.value?.save({ name: name.value, description: description.value });
    };

    const onUpdateLoading = (val: boolean) => {
      loading.value = val;
    };
    return {
      name,
      description,
      onInputName,
      save,
      main,
      loading,
      onUpdateLoading,
      updateInfo
    };
  },
  methods: {
    getQueryString(name: string) {
      let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
      let search: any = window.location.search;
      let r = search.substr(1).match(reg);
      if (r != null) {
        return decodeURIComponent(r[2]);
      }
      return null;
    },
    backHandler(){
      this.closeCurrentTab()
      this.openTriggleListTab()
    },
    mainBackHandler() {
      this.closeCurrentTab()
      // 从工单类型新建编辑只需要关闭tab
      if(!this.getQueryString('bizTypeId')){
        this.refreshTriggleListTab()
        this.openTriggleListTab()
      }
    },
    closeCurrentTab() {
      const id = window.frameElement?.dataset?.id;
      this.$platform.closeTab(id);
    },
    openTriggleListTab() {
      
      const fromId = window.frameElement?.getAttribute('id');
      
      openAccurateTab({
        type: PageRoutesTypeEnum.PageConnectorList,
        fromId,
        reload:true
      })

    },
    refreshTriggleListTab() {
      let fromId = window.frameElement?.getAttribute("fromid");
      this.$platform.refreshTab(fromId);
    }
  },
  render(h: CreateElement) {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorSettingView}>
        <ConnectorSettingViewHeader
          moduleName={t('common.connector.title.connector')}
          name={this.name}
          onInput={this.onInputName}
          onSave={this.save}
          loading={this.loading}
          onUpdateLoading={this.onUpdateLoading}
          onBack={this.backHandler}
        ></ConnectorSettingViewHeader>
        <ConnectorSettingViewMain
          ref="main"
          onEditInfo={this.updateInfo}
          onStartLoading={()=>{this.onUpdateLoading(true)}}
          onEndLoading={()=>{this.onUpdateLoading(false)}}
          onBack={this.mainBackHandler}
        >
        </ConnectorSettingViewMain>
      </div>
    );
  },
});
